<!DOCtype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vue_025_非父子组件之间的交互</title>
</head>
<body>
    <div id="app">
        组件的注册，关键字：component <br />
        非父子组件（兄弟组件）之间的交互需要通过事件中心来管理组件间的通信<br />
        <menu-item1></menu-item1>
        <menu-item2></menu-item2>
        销毁事件（启动后，以上两个非父子组件也就是兄弟组件之间就不能再通过事件中心即监听者来进行通信）
        <button @click="xiaohui">销毁事件</button>
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        //提供事件中心
        var hab = new Vue();

        //component() 两个参数  参数一：组件的名称  参数二：是一个对象
        //组件名称只能出现首写字母大写，其余的都不能大写，如果使用驼峰式的明明方式，在使用组件的时候，只能在模板中使用组件
        // Vue.component("ZujianName",{ //这是驼峰式组件
        Vue.component("menu-item1",{
            //对象中两个重要的属性  第一个是data（data的值是一个函数）  第二个是组件的模板内容,关键字 template
            data:function(){
                //对象中放具体的数据
                return {
                    count:1
                }
            },
            methods:{
                //组件1的按钮按下后，触发监听者hab的监听事件
                item1_click:function(){
                    //hab的监听事件，方法名为item2-event，然后调用监听事件（item2-event）并传递参数
                    hab.$emit("item2-event",2);
                }
            },
            //组件的内容实际上就是一个字符串
            // template:"<button @click='method1'>点击了{{count}}次</button>",
            //反引号位于左上角，数字1键的左边、Esc键的下方
            template:`
                <div>
                    组件1：{{count}}
                    <button @click="item1_click">组件1的按钮</button>
                </div>
            `,
            //钩子函数：表示当模板就绪完毕后，可以对模板进行操作了
            mounted:function(){
                //在下面的回调函数中this 会失效
                var item1_this = this;
                //在这里监听事件（item1-event）
                hab.$on("item1-event",function (val) {
                    item1_this.count += val;
                    //这里会失效,因为在监听函数中的this不再指向组件本身，而是指向事件监听者hab
                    // this.count += val;
                });
            }
        });
        Vue.component("menu-item2",{
            //对象中两个重要的属性  第一个是data（data的值是一个函数）  第二个是组件的模板内容,关键字 template
            data:function(){
                //对象中放具体的数据
                return {
                    count:1
                }
            },
            methods:{
                 //组件2的按钮按下后，触发监听者hab的监听事件
                 item2_click:function(){
                    //hab的监听事件，方法名为item1-event，然后调用监听事件（item1-event）并传递参数
                    hab.$emit("item1-event",1);
                }
            },
            //组件的内容实际上就是一个字符串
            // template:"<button @click='method1'>点击了{{count}}次</button>",
            //反引号位于左上角，数字1键的左边、Esc键的下方
            //$emit是固定写法
            template:`
                <div>
                    组件2：{{count}}
                    <button @click="item2_click">组件2的按钮</button>
                </div>
            `,
            //钩子函数：表示当模板就绪完毕后，可以对模板进行操作了
            mounted:function(){
                //在下面的回调函数中this 会失效
                var item2_this = this;
                //在这里监听事件（item2-event）
                hab.$on("item2-event",function (val) {
                    item2_this.count += val;
                    //这里会失效,因为在监听函数中的this不再指向组件本身，而是指向事件监听者hab
                    // this.count += val; 
                });
            }
        });

        var vm = new Vue({
            el:'#app',
            data:{

            },
            methods:{
                xiaohui:function(){
                    hab.$off("item1-event");
                    hab.$off("item2-event");
                }
            }
        });

    </script>
</body>

</html></SCRIPT>